<template>
    <div class="upload-container">
        <el-button icon='el-icon-upload' size="mini" :style="{background:color,borderColor:color}" @click=" dialogVisible=true" type="primary">上传图片
        </el-button>
        <el-dialog append-to-body :visible.sync="dialogVisible">
            <el-upload class="editor-slide-upload" :action="fileUpload" :multiple="true" :file-list="fileList" :show-file-list="true"
                       list-type="picture-card" :on-remove="handleRemove" :on-success="handleSuccess" :before-upload="beforeUpload">
                <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleSubmit">确 定</el-button>
        </el-dialog>
    </div>
</template>

<script>
	// import { getToken } from 'api/qiniu'
	import { Message } from 'element-ui'

	export default {
		name: 'editorSlideUpload',
		props: {
			color: {
				type: String,
				default: '#1890ff'
			}
		},
		data() {
			return {
				fileUpload: process.env.BASE_API + '/files/upload',
				dialogVisible: false,
				listObj: {},
				fileList: []
			}
		},
		methods: {
			checkAllSuccess() {
				return Object.keys(this.listObj).every(item => this.listObj[item].hasSuccess)
			},
			handleSubmit() {
				const arr = Object.keys(this.listObj).map(v => this.listObj[v])
				if (!this.checkAllSuccess()) {
					this.$message('请等待所有图片上传成功 或 出现了网络问题，请刷新页面重新上传！')
					return
				}
				console.log(arr)
				this.$emit('successCBK', arr)
				this.listObj = {}
				this.fileList = []
				this.dialogVisible = false
			},
			handleSuccess(response, file) {
				const uid = file.uid
				const objKeyArr = Object.keys(this.listObj)
				for (let i = 0, len = objKeyArr.length; i < len; i++) {
					if (this.listObj[objKeyArr[i]].uid === uid) {
						this.listObj[objKeyArr[i]].url = response.body.filePath
						this.listObj[objKeyArr[i]].hasSuccess = true
						return
					}
				}
			},
			handleRemove(file) {
				const uid = file.uid
				const objKeyArr = Object.keys(this.listObj)
				for (let i = 0, len = objKeyArr.length; i < len; i++) {
					if (this.listObj[objKeyArr[i]].uid === uid) {
						delete this.listObj[objKeyArr[i]]
						return
					}
				}
			},
			aabeforeUpload(file) {
				const _self = this
				const _URL = window.URL || window.webkitURL
				const fileName = file.uid
				this.listObj[fileName] = {}
				return new Promise((resolve, reject) => {
					const img = new Image()
					img.src = _URL.createObjectURL(file)
					img.onload = function() {
						_self.listObj[fileName] = { hasSuccess: false, uid: file.uid, width: this.width, height: this.height }
					}
					resolve(true)
				})
			},
			beforeUpload(file) {
				const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
				const isLt2M = file.size / 1024 / 1024 < 2
				if (!isJPG) {
					Message({
						message: '请上传小于2M，JPG/JPEG/PNG格式的图片!',
						type: 'error',
						duration: 2 * 1000
					})
                    return false
				}
				if (!isLt2M) {
					Message({
						message: '请上传小于2M，JPG/JPEG/PNG格式的图片!',
						type: 'error',
						duration: 2 * 1000
					})
					return false
				}
				let flag = isJPG && isLt2M
                if (flag) {
                    this.aabeforeUpload(file)
                }
//				return flag
			}
		}
	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .upload-container {
        .editor-slide-upload {
            margin-bottom: 20px;
        }
    }
</style>
